<template>
    <div class="user-op-container">
        <div class="user-info-div">
            <div class="user-icon">
                <img src="@/assets/icon/user-icon.png" />
            </div>
            <div class="user-info">
                <div class="user-code">{{ store.state.username }}</div>
                <div class="user-org">{{ store.state.departmentName }}</div>
            </div>
        </div>
        <div class="base-op">
            <a href="javascript:void(0)">基础信息</a>
            <a href="javascript:void(0)">账户信息</a>
            <a href="javascript:void(0)" @click="pwdModify">修改密码</a>
        </div>
        <div class="user-op-div">
            <div class="user-op">
                <span class="el-icon-edit op-icon"></span>
                <span>问题反馈</span>
            </div>
            <div class="user-op">
                <span class="el-icon-setting op-icon"></span>
                <span>系统设置</span>
            </div>
        </div>
        <div class="btn-quit" @click="handleQuit">
            <span class="el-icon-switch-button op-icon"></span>
            <span>退出</span>
        </div>
        <el-dialog
            width="400px"
            top="20vh"
            title="部门"
            v-model="showPwdDialog"
            :lock-scroll="true"
            :close-on-click-modal="false"
        >
            <div class="dialog-content">
                <div class="menu-form">
                    <div class="form-item">
                        <div class="label-class">原密码</div>
                        <div class="content-class">
                            <el-input
                                v-model="pwdForm.pwdBefore"
                                type="password"
                                class="form-input-class"
                                placeholder="请输入原密码"
                            ></el-input>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label-class">新密码</div>
                        <div class="content-class">
                            <el-input
                                v-model="pwdForm.pwdNew"
                                type="password"
                                class="form-input-class"
                                placeholder="请输入新密码"
                            ></el-input>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label-class">新密码确认</div>
                        <div class="content-class">
                            <el-input
                                v-model="pwdForm.pwdNewAgain"
                                type="password"
                                class="form-input-class"
                                placeholder="请再次输入新密码"
                            ></el-input>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showPwdDialog = false">取 消</el-button>
                    <el-button type="primary" @click="onPwdSubmit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, toRefs, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import http from '@/http.js'
import { store } from '@/store'

const router = useRouter()

const employeeName = ref('')

const pwdForm = reactive({
    pwdBefore: '',
    pwdNew: '',
    pwdNewAgain: ''
})

const showPwdDialog = ref(false)

const handleQuit = () => {
    router.push('/login')
}

const pwdModify = () => {
    showPwdDialog.value = true
}

const onPwdSubmit = () => {
    let params = state.pwdForm
    http.fetchJson({
        url: '/sys/user/passwordModify',
        data: params
    }).then((res) => {
        ElNotification({
            title: '提示',
            message: '修改成功',
            type: 'success'
        })
        showPwdDialog.value = false
    })
}

// mounted
onMounted(() => {})
</script>
<style scoped>
.user-op-container {
    position: absolute;
    top: 50px;
    right: 0;
    width: 250px;
    z-index: 998;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.user-info-div {
    width: 100%;
    display: flex;
    padding: 15px;
    position: relative;
}

/*.user-info-div::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    border: 1px solid #e8eaec;
    transform: scaleY(0.5);
    width: 100%;
}*/

.user-icon {
    width: 40px;
    height: 40px;
}

.user-icon img {
    width: 100%;
    height: 100%;
}

.user-info {
    padding-left: 15px;
}

.user-code {
    font-size: 13px;
    font-weight: bold;
    color: #515a6e;
    padding-bottom: 3px;
}

.user-org {
    font-size: 12px;
    color: #808695;
}

.base-op {
    display: flex;
    padding: 15px;
}

.base-op a {
    display: block;
    width: 33.33%;
    font-size: 12px;
    color: #515a6e;
    /*padding: 0 10px;*/
    text-align: center;
    border-right: 1px solid #e8eaec;
}

.base-op a:hover {
    color: #00adb5;
}

.base-op a:last-child {
    border-right: none;
}

.user-op-div {
    width: 100%;
}

.user-op {
    padding: 10px 15px;
    font-size: 12px;
    color: #515a6e;
}

.user-op:hover {
    background: #f8f8f9;
    color: #00adb5;
    cursor: pointer;
}

.user-op span {
    padding-left: 7px;
}

.btn-quit {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    position: relative;
    font-size: 12px;
}

.btn-quit:hover {
    cursor: pointer;
    color: #00adb5;
}

.btn-quit span {
    padding-left: 7px;
}

.btn-quit::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    border: 1px solid #e8eaec;
    transform: scaleY(0.5);
}

.op-icon {
    font-size: 13px;
}

.dialog-content {
    padding: 10px 20px;
}

.label-class {
    width: 100%;
    padding: 10px 0;
    font-size: 12px;
    color: #657180;
    font-weight: bold;
}

.content-class {
    width: 100%;
    padding: 0 0 10px 0;
}

.form-input-class {
    width: 100%;
}
</style>
